<template>
  <div id="w">
      <div class="w1">
            <router-link :to="{
            name:'Home'
            }">
            <img src="../assets/zh.png" alt="">
            </router-link>
            <div class="w2">
                <img src="../assets/rx.png" alt="">
            </div>
            <div class="w3">
                <span>戳我立即登录哦QAQ</span>
            </div>
            <div class="w4">
                <span>我的墨币: 0</span>
            </div>
            <div class="w5">
            </div>
        </div>
        <div class="w6">
            <ul>
                <li>
                    <img src="../assets/ll.png" alt="">
                    <p class="p1">星币充值</p>
                    <img class="img1" src="../assets/yh.png" alt="">
                </li>
                <li>
                    <img src="../assets/ll.png" alt="">
                    <p class="p1">星币充值</p>
                    <img class="img1" src="../assets/yh.png" alt="">
                </li>
                <li>
                    <img src="../assets/ll.png" alt="">
                    <p class="p1">星币充值</p>
                    <img class="img1" src="../assets/yh.png" alt="">
                </li>
                <li>
                    <img src="../assets/ll.png" alt="">
                    <p class="p1">星币充值</p>
                    <img class="img1" src="../assets/yh.png" alt="">
                </li>
                <li>
                    <img src="../assets/ll.png" alt="">
                    <p class="p1">星币充值</p>
                    <img class="img1" src="../assets/yh.png" alt="">
                </li>
                <li>
                    <img src="../assets/ll.png" alt="">
                    <p class="p1">星币充值</p>
                    <img class="img1" src="../assets/yh.png" alt="">
                </li>
            </ul>
        </div>
      </div>
</template>

<script>
export default {

}
</script>

<style>
.w1{
    height: 230px;
    /* background-color: pink; */
    background-image: url(../assets/hong.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.w1 img{
    width: 2.75rem;
    height: 2.75rem;
    margin: -.1875rem /* 3/16 */ -.1875rem /* 3/16 */;
}
.w2 img{
    width: 75px;
    height: 75px;
    margin-top: 25px;
    margin-left: 145px;
}
.w3{
    width: 150px;
    height: 25px;
    /* border: 1px solid black; */
    margin-left: 110px;
    line-height: 23px;
}
.w3 span{
    color: #fff;
}
.w4{
    width: 150px;
    height: 25px;
    /* border: 1px solid black; */
    margin-left: 110px;
    text-align: center;
    line-height: 23px;
}
.w4 span{
    color: #fff;
    font-size: .875rem;
}
.w5{
    width: 100%;
    height: 1.25rem;
    background-image: url(../assets/wb.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 210px;
    left: 0;
}
.w6{
    height: 300px;
    /* background-color: pink; */
    background-color: #fff;
}
.w6 ul li{
    width: 100%;
    height: 50px;
    /* border: 1px solid black; */
    border: 1px solid #efefef;
    position: relative;
}
.w6 ul li img{
    width: 2rem;
    height: 2rem;
    margin: 7px 10px;
    float: left;
}
.w6 .p1{
    float: left;
    font-size: .875rem;
    color: #666;
    line-height: 45px;
    padding-left: 0;
}
.w6 .img1{
    width: 2.75rem;
    height: 2.75rem;
    margin-left: 200px;
    margin-top: 0;
}
</style>